<template>
	<view class="wrap">

		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode=""></image>
		<view class="inner">
			<view class="searchBox">
				<view class="left">
					<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/9.png" mode="">
					</image>
					平台通知
				</view>
				<view class="mid"></view>
				<view class="right">
					<u-notice-bar font-size="24" bg-color="#fff" color="#666666" :volume-icon="false" :more-icon="false"
						:close-icon="false" mode="horizontal" :list="list"></u-notice-bar>
				</view>
			</view>
		</view>
		<view class="banner">
			<image @click="navTo('/pages/sys/home/empower')" class="img"
				src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/2.png" mode="widthFix">
			</image>
		</view>
		<view class="grid">
			<u-grid :col="5" :border="false">
				<u-grid-item v-for="(item,index) in allPlat" @click="navTo('/pages/sys/home/gameplayIntro/index',item.code,index)">
					<image class="icon" mode="widthFix" :src="item.icon">
					</image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view> 

		<view class="list">
			<u-tabs bg-color="none" bar-width="96" inactive-color='#666666' bar-height="5" active-color="#333"
				:list="tablist" :is-scroll="true" :current="current" @change="change"></u-tabs>

			<view class="listCont">
				<view class="ul" v-if="list1.length">
				<list :list1="list1" />
				</view>
				
				<view v-else class="empty" style="padding-top: 150px;">
					<view v-if="!list1.length && senDate" class="emptyAddress-box">
						<u-empty text="暂无内容" mode="news"></u-empty>
					</view>
				</view>
			</view>
		</view>


	</view>

</template>
<script>
	import qun from './compoments/qun.vue'
	import service from './compoments/service.vue'
	import note from './compoments/note.vue'

	import list from './list.vue'
	export default {
		components: {
			qun,
			service,
			note,
			list
		},
		data() {
			return {
				allPlat: [{
						name: "抖音任务",
						icon: "http://cdn.haipiwan.com/icon/icon_dy.png",
						code: "dy",
					},
					{
						name: "小红书任务",
						icon: "http://cdn.haipiwan.com/icon/icon_xhs.png",
						code: "xhs",
					},
					{
						name: "快手任务",
						icon: "http://cdn.haipiwan.com/icon/icon_ks.png",
						code: "ks",
					},
					{
						name: "视频号任务",
						icon: "http://cdn.haipiwan.com/icon/icon_sph.png",
						code: "sph",
					},
					{
						name: "咸鱼任务",
						icon: "http://cdn.haipiwan.com/icon/icon_xy.png",
						code: "xy",
					}
				],

				tablist: [{
					name: '新人任务'
				}, {
					name: '每日必做'
				}],
				current: 0,
				qun: false,
				serviceMask: false,
				list: [
					'无忧赚提高收益教学',
					'无忧赚提高收益教学',
					'无忧赚提高收益教学',
					'无忧赚提高收益教学'
				],
				
				total: null, //总共多少条数据
				formData: {
					limit: 15, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],

			};
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.limit;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
		
				this.getlist();
		
		
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},		
		onShow() {
			if(this.vuex_token){
				this.formData.page = 1
				this.list1 = []
				this.getlist()
			}else{
				this.getCode()
			}
			
		},
		onLoad() {

		},
		methods: {
			
			getlist() {
				this.senDate = false;
				this.$u.api
					.pageJobList({
						page: this.formData.page,
						limit: this.formData.limit,
						
						// "tab":1,// 1:新人任务, 2:每日必做
						tab: this.current==0?"1":"2",
						// "plat":"dy"  //平台：抖音：dy,快手:ks，小红书：xhs,咸鱼：xy, 视频号：sph
						
						plat:'' //
					})
					.then((res) => {
			
						this.senDate = true;
						if (res.code == 0) {
			
							console.log(res.data, 666666);
							this.total = res.data.total;
							const newlist = res.data.list;
							this.list1.push(...newlist);
			
			
			
							this.list1 = res.data.list?.map(e => {
			
								let flag = undefined
								if (this.current == 0 && e.isAttention == 'Y') {
									flag = true
								}
								if (this.current == 1) {
									flag = true
								}
								return {
									...e,
									flag
								}
							})
			
			
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			
			getUrlCode() {
				// 截取url中的code方法
				var url = location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(url.indexOf("?") + 1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split("=");
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			getCode() {
				this.code = this.getUrlCode().code; // 截取code
				// 如果没有code，则去请求
				if (this.code == null || this.code === "" || this.code == undefined) {
					
					// https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f122e8f84c81159&redirect_uri=http://taskjob-h5.guazishouyou.cn&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
					var wxUrl =
						"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f122e8f84c81159&redirect_uri=http://taskjob-h5.guazishouyou.cn&response_type=code&scope=snsapi_base&state=state#wechat_redirect";
					window.location.href = wxUrl;
				} else {
					
					this.$u.api
						.openIdLogin({
							code: this.code
						})
						.then((res1) => {
							
							this.$u.vuex("vuex_token", res1.token);
							
							this.formData.page = 1
							this.list1 = []
							this.getlist()
							
						});
				}
			},
			
			change(index) {
				this.current = index;
				this.formData.page = 1
				this.list1 = []
				this.getlist()
			},
			
			navTo(url,type,num) {
				if(type){
					uni.navigateTo({
						url:url+'?type='+type+'&num='+num
					})
				}else{
					uni.navigateTo({
						url
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>

	.listCont{
		    margin:  16px;
		    background: #fff;
		    border-radius: 7px;
		    padding:0 16px 16px;
	}
	/deep/ .u-tab-bar {
		background: #3757FF !important;
	}

	/deep/ .u-sticky-wrap {
		background: none !important;
	}

	.sticky {
		padding-top: 112rpx;
	}

	/deep/ .u-sticky-wrap {
		background: none !important;
	}



	.close {
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		// margin: 46rpx auto;
	}
	

	.wrap {
		width: 100%;

		.inner {
			padding: 107rpx 32rpx 0;

			.searchBox {
				height: 73rpx;
				background: #FFFFFF;
				opacity: 1;
				display: flex;
				align-items: center;
				border-radius: 15rpx;

				.left {


					font-size: 28rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					color: #FF370B;
					display: flex;
					line-height: 73rpx;

					// align-items: center;
					.icon {

						width: 65rpx;
						height: 83rpx;
						margin: -11rpx 6rpx 0 6rpx;
					}

				}

				.mid {
					margin: 0 0 0 21rpx;
					width: 1rpx;
					height: 42rpx;
					background: #EAEAEA;
				}




				.right {
					width: 450rpx;
					flex: 1;
					font-size: 24rpx;
					font-family: PingFang SC-Light, PingFang SC;
					font-weight: 300;
					color: #666666;

					/deep/ .u-notice-box {
						margin-left: 0 !important;
					}

					/deep/ .u-notice-bar {
						padding: 9px 12px 9px 8px !important;
					}

				}


			}

		}

		.banner {
			margin: 31rpx 12rpx 0 32rpx;

			.img {
				width: 100%;
			}
		}

		.banner1 {
			padding: 36rpx 32rpx 22rpx;

			.icon {
				width: 100%;
			}
		}

		.grid {
			padding: 32rpx 32rpx 0rpx;

			.grid-text {
				font-size: 26rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #333333;
				line-height: 30rpx;
			}

			.icon {
				width: 104rpx;
				height: 104rpx;
			}

			/deep/ .u-grid-item {
				background: none !important;

			}
		}

		.nav {
			display: flex;
			align-items: center;
			margin: 0 32rpx;

			.item {
				flex: 1;

				&:first-child {
					margin-right: 30rpx;
				}

				.icon {
					width: 100%;
				}
			}
		}

	}
</style>
